<div class="layui-row">
  <div class="layui-col-lg3">
    <div class="layui-btn-group" id="device_handle_permi">
      <button class="layui-btn data_handle_btn">添加</button>
      <!-- <button class="layui-btn device_deliver">转移</button> -->
      <!-- <button type="button" class="layui-btn" id="file_input_btn"><i class="layui-icon"></i>文件导入</button> -->
    </div>
  </div>
  <div class="layui-col-lg3">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" l name="search_key"  placeholder="名称/ID" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
            </div>
        </div>
    </form>
  </div>
</div>

<table class="layui-table" id="base_info_manage_table" lay-filter="base_info_manage_table"></table>
<script type="text/html" id="table_info_handle_bar">
    <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-edit" lay-event="del">删除</a>
    <!-- <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">启/停</a> -->
</script>

<script type="text/html" id="table_header">
  <p>建筑管理表</p>
</script>

<!-- 添加数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="handle_data_form" style="padding: 20px;display: none;">
  <div class="layui-row">
    <div class="layui-col-md6">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" lay-reqtext="必填项!" placeholder="保存后，禁止重复/更改" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">编号</label>
          <div class="layui-input-block">
            <input type="text" name="name_id" placeholder="建筑编号" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">类型</label>
          <div class="layui-input-block">
            <input name="kind" type="text" list="kind_list" placeholder="输入或者选择建筑类型" autocomplete="off" class="layui-input">
            <datalist id="kind_list">
              <option>普通</option>
              <option>厂房</option>
              <option>仓库</option>
            </datalist>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">进入权限</label>
          <div class="layui-input-block">
            <input type="text" name="auth_in"  autocomplete="off" placeholder="允许进入的人员类型" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">面积/容量</label>
          <div class="layui-input-block">
            <input type="text" name="volume" lay-verify="number" value="0"  autocomplete="off" placeholder="面积/容量" class="layui-input">
          </div>
        </div>
      </div>

    </div>
    <div class="layui-col-md6">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">停留时间</label>
          <div class="layui-input-block">
            <input type="text" name="time_limit"  autocomplete="off" placeholder="0-24小时" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">人数限制</label>
          <div class="layui-input-block">
            <input type="text" name="person_limit"  autocomplete="off" placeholder="允许同时存在的最高人数" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">报警时段</label>
          <div class="layui-input-block">
            <input type="text" name="alarm_time" id="e_build_alarm_time"  autocomplete="off" placeholder="进入即报警的时间段" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">备注</label>
          <div class="layui-input-block">
            <input type="text" name="remark"  autocomplete="off" placeholder="" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">显示图标</label>
          <div class="layui-input-block">
            <input type="radio" name="icon"   value="normal" class="layui-input" checked="">
            <img src="/static/show_icon/normal.png" style="width: 30px;height: 30px">
            <input type="radio" name="icon"   value="factory" class="layui-input">
            <img src="/static/show_icon/factory.png" style="width: 30px;height: 30px">
            <input type="radio" name="icon"   value="warehouse" class="layui-input">
            <img src="/static/show_icon/warehouse.png" style="width: 30px;height: 30px">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="add_submit" id="submit_btn">提交</button>
  </div>
</form>

<!-- 添加数据表单结束 -->

<!-- 修改数据表单开始 -->
<form  class="layui-form layui-form-pane " action="" id="edit_data_form" lay-filter="edit_data_form" style="padding: 10px;display: none;">
  <div class="layui-row">
    <div class="layui-col-md6">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" lay-reqtext="必填项!" placeholder="保存后，禁止重复/更改" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">编号</label>
          <div class="layui-input-block">
            <input type="text" name="name_id" placeholder="建筑编号" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">类型</label>
          <div class="layui-input-block">
            <input name="kind" type="text" list="change_kind_list" placeholder="输入或者选择建筑类型" autocomplete="off" class="layui-input">
            <datalist id="change_kind_list">
              <option>普通</option>
              <option>厂房</option>
              <option>仓库</option>
            </datalist>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">进入权限</label>
          <div class="layui-input-block">
            <input type="text" name="auth_in"  autocomplete="off" placeholder="允许进入的人员类型" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">面积/容量</label>
          <div class="layui-input-block">
            <input type="text" name="volume" lay-verify="number" value="0"  autocomplete="off" placeholder="面积/容量" class="layui-input">
          </div>
        </div>
      </div>

    </div>
    <div class="layui-col-md6">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">停留时间</label>
          <div class="layui-input-block">
            <input type="text" name="time_limit"  autocomplete="off" placeholder="0-24小时" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">人数限制</label>
          <div class="layui-input-block">
            <input type="text" name="person_limit"  autocomplete="off" placeholder="允许同时存在的最高人数" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">报警时段</label>
          <div class="layui-input-block">
            <input type="text" name="alarm_time" id="build_alarm_time"  autocomplete="off" placeholder="进入即报警的时间段" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">备注</label>
          <div class="layui-input-block">
            <input type="text" name="remark"  autocomplete="off" placeholder="" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label layui-bg-green">显示图标</label>
          <div class="layui-input-block">
            <input type="radio" name="icon"   value="normal" class="layui-input" checked="">
            <img src="/static/show_icon/normal.png" style="width: 30px;height: 30px">
            <input type="radio" name="icon"   value="factory" class="layui-input">
            <img src="/static/show_icon/factory.png" style="width: 30px;height: 30px">
            <input type="radio" name="icon"   value="warehouse" class="layui-input">
            <img src="/static/show_icon/warehouse.png" style="width: 30px;height: 30px">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="edit_submit" id="">提交</button>
  </div>
</form>

<!-- 修改数据表单结束 -->

<!-- 设备转移表单 开始-->
<!-- <div class="layui-container" id="device_deliver_div" style="display: none;padding: 20px">
    <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green" style="text-align: center;">转移到</label>
      <div class="layui-input-block">
       <input type="text" list="deliver_target" name="" class="layui-input" id="dev_to_user">
        <datalist id="deliver_target">
        </datalist>
      </div>
    </div>
  </div>
  <table id="user_tree"  class="layui-table"></table>
</div> -->
<!-- 设备转移表单 结束-->

<!-- 设备导入处理开始 -->
<!-- <div class="layui-form-item" style="display: none;">
    <div class="layui-inline">
      <label class="layui-form-label layui-bg-green">id</label>
      <div class="layui-input-block">
        <input type="text" name="device_input"  autocomplete="off" class="layui-input" id="device_input">
      </div>
    </div>
</div> -->
<!-- 设备导入处理结束 -->

<!-- 引入把上传的表格转变为json的插件 -->
<script src="/static/js/xlsx.js"></script>
<!-- js代码开始 -->

<script type="text/javascript">
if(user_permi==='normal'){
  $('#device_handle_permi').hide()
}
var ajax_url='building'
// 设备数据表格渲染函数
var table_show=function(table_data){
  console.log(table_data)
  table.render({
    elem: '#base_info_manage_table',
    toolbar:'#table_header',
    data: table_data,
    id:'base_info_manage_table',
    cols: [[
        {type: "checkbox", fixed: "left"},
        {field: 'id',width:40, title: 'ID',templet:function(d){
          return d.LAY_INDEX
        }},
        {field: 'name', title: '名称',sort:true},
        {field: 'name_id', title: '编号',sort:true},
        {field: 'position', title: '位置',sort:true,templet:function(d){
          var position=d.position;
          //console.log(position)
          if(position!=='0' && position!==''){
            position=eval('('+d.position+')')
            return position.map
          }else{
            return ''
          }
          
        }},
        {field: 'kind', title: '类型',sort:true},
        {field: 'auth_in', title: '进入权限',sort:true,templet:function(d){
          var param_set=eval('('+d.param_set+')')
          return param_set.auth_in
        }},
        {field: 'volume', title: '面积/容量',sort:true,templet:function(d){
          var param_set=eval('('+d.param_set+')')
          return param_set.volume
        }},
        {field: 'time_limit', title: '停留时长',sort:true,templet:function(d){
          var param_set=eval('('+d.param_set+')')
          return param_set.time_limit
        }},
        {field: 'person_limit', title: '人数限制',sort:true,templet:function(d){
          var param_set=eval('('+d.param_set+')')
          return param_set.person_limit
        }},
        {field: 'alarm_time', title: '报警时段',sort:true,templet:function(d){
          var param_set=eval('('+d.param_set+')')
          return param_set.alarm_time
        }},
        {field: 'remark', title: '备注'},
        {field: 'date_added', title: '添加时间',sort:true},
        {title: '操作', minWidth: 110, templet: '#table_info_handle_bar', fixed: "right", align: "center"}
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}

// 首次用户数据加载
get_info_ajax(ajax_url,'get_init_data',table_show)

// 打开添加弹窗
$(".data_handle_btn").on("click", function () {
    document.getElementById("handle_data_form").reset();
    form.render();
    // 人员图片上传功能
    layer.open({
        type: 1
        ,title:'新增建筑信息'
        ,area:['750px','500px']
        ,offset:'100px'  
        ,id: 'add_data' //防止重复弹出
        ,content:$('#handle_data_form')
        ,shade: 0 //不显示遮罩
      });
});

// ----添加功能start----//

form.on('submit(add_submit)',function(obj){
  var base_info=package_data(obj.field)
  //console.log(base_info)
  post_info_ajax(base_info,ajax_url,'add',table_show)
  return false
})

// ----添加功能end----//



// ----监听编辑按钮，打开修改弹窗start---- //
table.on('tool(base_info_manage_table)', function (obj) {
  var result = obj.data;
  if(obj.event=='edit'){

    var param_set=eval('('+result.param_set+')')
    result=$.extend(result,param_set)
    document.getElementById("edit_data_form").reset();
    form.val('edit_data_form',result)

    layer.open({
      type: 1
      ,area:['750px','500px']
      ,offset:'100px' 
      ,id: 'edit_data' //防止重复弹出
      ,content:$('#edit_data_form')
      ,shade: 0 //不显示遮罩
    });
  }else if(obj.event=='del'){
      layer.confirm("确定删除建筑："+result.name+"？",
                {btn: ['是', '否']}, 
                function (index) {
                  post_info_ajax(result,ajax_url,'del',table_show)
                }
                ,function(){
                  layer.closeAll()
                });
  }
});

// ----监听编辑按钮，打开修改弹窗end---- //


// ----编辑数据提交后台功能start----//

form.on('submit(edit_submit)',function(obj){
  var base_info=package_data(obj.field)
  //console.log(base_info)
  post_info_ajax(base_info,ajax_url,'edit',table_show)
  return false
})

// ----编辑数据提交后台功能end----//

//封装数据
var package_data=function(result){

  var base_data={}
  base_data['name']=result['name']
  base_data['name_id']=result['name_id']
  base_data['kind']=result['kind']
  base_data['remark']=result['remark']
  var param_set={}
  param_set['time_limit']=result['time_limit']
  param_set['person_limit']=result['person_limit']
  param_set['auth_in']=result['auth_in']
  param_set['alarm_time']=result['alarm_time']
  param_set['volume']=result['volume']
  param_set['icon']=result['icon']
  base_data['param_set']=JSON.stringify(param_set)

  return base_data
}


// 监听设备搜索操作
form.on('submit(data-search-btn)', function (data) {

  var search_key = data.field['search_key'];
  if(search_key!==''){
    // 调用index页面搜索函数
    //console.log(search_key,main_data['main'])
    var search_result=search_func(main_data['main'],search_key,'name','name_id')
    // 表格重载
    table_show(search_result)
  }else{
    table_show(main_data['main'])
  }
  return false;
});

laydate.render({
  elem: '#build_alarm_time'
  ,type: 'time'
  ,range: true
  ,format: 'HH:mm'
});

laydate.render({
  elem: '#e_build_alarm_time'
  ,type: 'time'
  ,range: true
  ,format: 'HH:mm'
});
</script>